<script lang="ts" setup>
// lang="ts"   支持 ts 语法
// setup 是 Vue3 的组合式 API 写法
console.log('根组件被加载了')

// 定义变量/常量
const msg:string = 'Hello World'
const nickName:string = '张三'
const age:number = 19
</script>

<template>
  <!-- template 类似鸿蒙组件的 build() 函数，用于构建界面 -->
  <!-- 通过插值表达式 {{ }}，往标签中插入文本内容  -->
  <h1 class="title">{{ msg }}</h1>
  <p>{{ msg }}</p>
  <p>{{ nickName.charAt(0) }}</p>
  <p>{{ age >= 18 ? '已成年' : '你还小'  }}</p>
  <!-- 常见错误：双大括号 {{ }} 不能用于属性绑定 -->
  <input type="text" value="{{ msg }}">
</template>

<style scoped>
/* scoped 限制样式只对当前组件有效，避免样式冲突 */
.title {
  color:red;
}
</style>